<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import "css/layoutDesign.css";
    </style>
</head>
<body>

<div id="app">
    <h1 >天气查询</h1>
    <div>   <input type="text" class="search">
        <input type="button" class="dosearch" value="搜索">
    </div>
    <ul class="inforlist">
        <li>
            <span>{{yesterday.date}}</span>
            <span>{{yesterday.type}}</span>
            <span>{{yesterday.high}}</span>
            <span>{{yesterday.low}}</span>
            <span>{{yesterday.fx}}</span>
        </li>
        <li v-for="item in forecast">
            <span>{{item.date}}</span>
            <span>{{item.type}}</span>
            <span>{{item.high}}</span>
            <span>{{item.low}}</span>
            <span>{{item.fengxiang}}</span>
        </li>

    </ul>

</div>

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.main.js"></script>
<script type="text/javascript">
    /*document.getElementById("app").innerText="Hello Vue"*/
    var myapp = new Vue({
        el:"#app",
        data:{
            yesterday:[],
            forecast:[],
            city:"武汉"

        },

        methods:{
            //获取当前城市的天气预报
            getCity:function(){
                return this.city;

            },
            getData:function(){
                axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
                    //箭头函数一般在回调函数中使用
                    .then((result) => {
                        this.yesterday=result.data.data.yesterday;
                        this.forecast=result.data.data.forecast;
                        console.log(result.data);
                        }

                    )//请求成功的回调
                    .catch()//请求失败的回调
            }

        },
        created(){
            this.getData();//构造函数中调用获取天气函数
        }

    })
</script>
</body>
</html>

